<template>
  <div>
    <div id="myChart"></div>
  </div>
</template>

<script>

export default {
  name: "System",
  data() {
    return {};
  },
  mounted() {
    this.myChart();
  },

  methods: {
    //Echarts
    myChart() {
      var alarmTime = "2020";
      var option = {
        title: {
          text: "车体振动及转向架振动",
          // left: 'left',	// 可选为：'left' | 'center' | 'right'
          padding: [2, 0, 0, 20], // 上, 右, 下, 左
          textStyle: {
            fontWeight: "normal",
            color: "#2979FF", // 标题颜色
            fontSize: 16,
          },
        },
        /* 提示框组件 */
        tooltip: {
          trigger: "axis", // 触发类型，在饼形图中为item
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params, ticket, callback) {
            // 用formatter回调函数显示多项数据内容
            var htmlStr = "";
            for (var i = 0; i < params.length; i++) {
              var param = params[i];
              var xName = param.name; // x轴的名称
              var seriesName = param.seriesName; // 图例名称
              var value = param.value; // y轴值
              var color = param.color; // 图例颜色

              if (i === 0) {
                htmlStr += xName + "<br/>"; //x轴的名称
              }
              htmlStr += "<div>";
              //为了保证和原来的效果一样，这里自己实现了一个点的效果
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                color +
                ';"></span>';

              // 文本颜色设置--(需要设置,请解注释下面一行)
              // htmlStr += '<span style="color:'+color+'">';

              // 圆点后面显示的文本
              htmlStr +=
                seriesName + "：" + value + "&nbsp&nbsp&nbsp" + alarmTime;

              // 文本颜色设置--(需要设置,请解注释下面一行)
              // htmlStr += '</span>';

              htmlStr += "</div>";
            }
            return htmlStr;
          },
        },
        color: ["HotPink", "DeepSkyBlue", "LawnGreen", "Gold"], // 图例及线条的颜色
        /* 设置图例样式 */
        legend: {
          left: "right", // 位置
          padding: [20, 20, 0, 0],
          icon: "circle", // 形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 12, // 设置间距
          data: [
            "车体振动I位",
            "车体振动II位",
            "转向架振动I位",
            "转向架振动II位",
          ],
          textStyle: {
            // 设置图例字体
            color: "#000000",
            // fontSize: "15"
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        
        xAxis: {
          type: "category",//显示类目
          boundaryGap: false,
          /* axisLine: { // 改变x轴颜色 默认不写为黑色
					lineStyle: {
						color: '#00FFFF',
						width: 1 // 这里是为了突出显示加上的
					}
				}, */
          data: ["0s", "1s", "2s", "3s", "4s", "5s", "6s", "7s", "8s", "9s"],
        },
        yAxis: {
          /* axisLine: { // 改变y轴颜色 默认不写为黑色
					lineStyle: {
						color: '#00FFFF',
						width: 1 // 这里是为了突出显示加上的
					}
				}, */
          type: "value",
          axisLine: {show: true},
        },
        series: [
          {
            name: "车体振动I位   ",
            type: "line",
            // stack: '加速度',
            smooth: true,
            /*lineStyle: {//折线颜色
					  normal: {
						  color: '#00FFFF',
						  width: 2
					  }
					},*/
            data: [
              "1.02",
              "0.84",
              "2.66",
              "1.23",
              "0.94",
              "0.27",
              "0.65",
              "3.3",
              "0.56",
              "1.14",
            ],
            // data: data.ctzd1
          },
          {
            name: "车体振动II位",
            type: "line",
            // stack: '加速度',
            smooth: true,
            /*lineStyle: { // 折线颜色
					  normal: {
						  color: '#00FFFF',
						  width: 2
					  }
					},*/
            data: [
              "2.57",
              "3.43",
              "1.16",
              "0.55",
              "0.52",
              "0.6",
              "0.13",
              "0.2",
              "1.38",
              "0.17",
            ],
            // data: data.ctzd2
          },
          {
            name: "转向架振动I位",
            type: "line",
            // stack: '加速度',
            smooth: true,
            /*lineStyle: { // 折线颜色
					  normal: {
						  color: '#00FFFF',
						  width: 2
					  }
					},*/
            data: [
              "0.39",
              "1.08",
              "0.15",
              "0.31",
              "1.98",
              "0.42",
              "0.14",
              "1.55",
              "0.27",
              "0.29",
            ],
            // data: data.zxjzd1
          },
          {
            name: "转向架振动II位",
            type: "line",
            // stack: '加速度',
            smooth: true,
            /*lineStyle: { // 折线颜色
					  normal: {
						  color: '#00FFFF',
						  width: 2
					  }
					},*/
            data: [
              "0.2",
              "0.35",
              "0.19",
              "0.95",
              "0.46",
              "0.32",
              "0.04",
              "0.38",
              "0.91",
              "0",
            ],
            // data: data.zxjzd2
          },
        ],
      };

      var chart = this.$echarts.init(document.getElementById("myChart"));
      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
#myChart {
  width: 700px;
  height: 410px;
  margin-top: 2%;
}
</style>

